<template>
	<div v-if="boxinfo.isShow">
		<div class="loginBox">
			<div class="label">用户名:</div>
			<input type="text" name="username">
			<div class="label">密码:</div>
			<input type="password" name="password">
			<div v-if="boxinfo.type == 'register'" class="label">确认密码:</div>
			<input v-if="boxinfo.type == 'register'" type="password" name="password">
			<a v-if="boxinfo.type == 'login'" class="loginbtn" href="javascript:void(0)">登录</a>
			<a v-else class="loginbtn" href="javascript:void(0)">注册</a>
		</div>
		<div class="mask" @click="hideBox"></div>
	</div>
</template>
<script>
	export default {
		props:['boxinfo'],
		// computed:{
		// 	isShow(){
		// 		return this.isshowlogin;
		// 	}
		// },
		methods:{
			hideBox(){
				this.$emit('hideloginbox');
			}
		}
	}
</script>
<style lang="less">
	.loginBox{
		position: fixed;
	    background-color: #fff;
	    z-index: 1200;
	    width: 45%;
	    height: 32%;
        left: 0;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    margin: auto;
	    box-sizing: border-box;
        padding: 40px 0;
	    text-align: center;
	    border-radius: 4px;
	    box-shadow: 2px 2px 10px #000;
    	.label{
	        width: 90px;
		    margin-left: 38px;
		    text-align: left;
    	}
    	input{
    		width: 80%;
		    height: 30px;
		    border-radius: 5px;
	        border: 1px solid #ccc;
            text-indent: 1em;
    	}
    	.loginbtn{
    		display:block;
		    width: 42%;
		    height: 40px;
		    line-height: 40px;
		    background-color: red;
		    border-radius: 5px;
		    margin: 0 auto;
		    margin-top: 20px;
		    color: #fff;
	        text-decoration: none;
    	}
	}
</style>